---
import ButtonA from "#/components/ButtonA.astro"
import Card from "#/components/Card.astro"
import TextA from "#/components/TextA.astro"
import H3 from "#/components/typography/h3.astro"
import { contentfulClient } from "#/lib/contentful/client.ts"
import type { BlogPost } from "#/lib/types.ts"

const BLOG_POST_COUNT = 4

const blogEntries = await contentfulClient.getEntries<BlogPost>({
  content_type: "blog",
  // @ts-expect-error
  order: "-fields.date",
  limit: BLOG_POST_COUNT,
})

const publishedBlogPosts = blogEntries.items.filter(entry =>
  import.meta.env.MODE === "production" ? entry.fields.hidden !== true : true
)

const [latestBlogPost, ...blogPosts] = publishedBlogPosts
---

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <Card padded>
    <a
      class="flex flex-col items-start gap md:gap-2 size-full"
      href={`/blog/${latestBlogPost.fields.slug}`}
    >
      <H3>{latestBlogPost.fields.title}</H3>
      <p class="text-pretty text-left md:text-lg text-gray-400 mb-4">
        {latestBlogPost.fields.description}
      </p>
      <div class="w-full flex flex-1 items-end">
        <ButtonA
          href={`/blog/${latestBlogPost.fields.slug}`}
          fake
        >read full post</ButtonA>
      </div>
    </a>
  </Card>

  <Card
    class="w-full flex flex-col items-start justify-start divide divide-y divide-solid divide-border/30"
  >
    {
      blogPosts.map((post) => (
        <a
          href={`/blog/${post.fields.slug}`}
          class="justify-center w-full flex flex-col text-left flex-start p-4 md:px-6"
        >
          <p class="text-xl font-bold">{post.fields.title}</p>
          <TextA fake>Read more</TextA>
        </a>
      ))
    }
    <div class="p-4 md:p-6 w-full flex flex-1 items-end">
      <ButtonA href={`/blog`}>See all posts</ButtonA>
    </div>
  </Card>
</div>
